<!--  -->
<template>
  <div class>
    <van-nav-bar
      title="设置登录密码"
      left-text="取消"
      
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div style="margin-top:12px;margin-bottom:60px">
      <van-field v-model.trim="passwd" :type="islook ? 'text' : 'password'"   label="旧密码"  placeholder="" >
      <template #right-icon>
          <van-icon @click="lookPass" name="eye-o" />
        </template>
      </van-field>
      <van-field v-model.trim="npasswd" :type="islook2 ? 'text' : 'password'"       label="新密码"  placeholder="" >
        <template #right-icon>
          <van-icon @click="lookPass2" name="eye-o" />
        </template>
      </van-field>
      <van-field v-model.trim="snpasswd" :type="islook3 ? 'text' : 'password'"       label="确认新密码"  placeholder="" >
        <template #right-icon>
          <van-icon @click="lookPass3" name="eye-o" />
        </template>
      </van-field>
    </div>

    <van-button @click="submit"  class="change" type="danger">确认修改</van-button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Toast } from "vant";
import Fetch from "../../utils/fetch";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "setPassword"
  },
  data() {
    //这里存放数据
    return {
      pass1: "",
      pass2: "",
      pass3: "",
      islook:false,
      islook2:false,
      islook3:false,
      passwd: '',
                npasswd: '',
                snpasswd: '',
				oldpwd_type:'password',
				newpwd_type:'password',
				confirm_newpwd_type:'password',
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    lookPass(){
      this.islook=!this.islook;
    },
    lookPass2(){
      this.islook2=!this.islook2;
    },
    lookPass3(){
      this.islook3=!this.islook3;
    },
    
    show_passwd(){
				if(this.oldpwd_type == "password"){
					this.oldpwd_type = "text";
				}else{
					this.oldpwd_type = "password";
				}
			},
			show_npasswd(){
				if(this.newpwd_type == "password"){
					this.newpwd_type = "text";
				}else{
					this.newpwd_type = "password";
				}
			},
			show_snpasswd(){
				if(this.confirm_newpwd_type == "password"){
					this.confirm_newpwd_type = "text";
				}else{
					this.confirm_newpwd_type = "password";
				}
      },
    submit(){
        if (!this.passwd) {
					this.$notify({
					    message: '请输入登录密码',
						color: '#FF3232',
						background: '#FFEAEA',
					});
                    return;
                }

                if (!this.npasswd) {
					this.$notify({
					    message: '请输入新登录密码',
						color: '#FF3232',
						background: '#FFEAEA',
					});
                    return;
                }

                if (!this.snpasswd) {
					this.$notify({
					    message: '请输入确认密码',
						color: '#FF3232',
						background: '#FFEAEA',
					});
                    return;
                }

                if (this.npasswd !== this.snpasswd) {
					this.$notify({
					    message: '新密码和确认密码不一致',
						color: '#FF3232',
						background: '#FFEAEA',
					});
                    return;
                }
        Fetch("/user/info/repasswd", {
                    passwd: this.passwd,
                    npasswd: this.npasswd
                }).then(() => {
                    this.$notify({
                        background: '#EAF1FF',
                        color: '#3292FF',
                        message: '修改成功'
                    });
                    this.$router.back();
                });
      },
    onClickLeft() {
      Toast("返回");
      history.go(-1)
    },
    onClickRight() {
      Toast("按钮");
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
/* //@import url(); 引入公共css类 */
.username {
  margin-top: 12px;
  margin-bottom: 200px;
}

.change {
  width: 342px;
  font-size: 18px;
  margin: auto;
  display: block;
  color: #fff;

  height: 50px;
  background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
  border-radius: 5px;
  box-shadow: 0px 2px 4px 0px #ffd9d4;
}
</style>